<template>
  <div id="content">
      <van-icon size="30px" name="cross" class="icon"/>
      <div><h2>手机号登录/注册</h2></div>
      <input type="text" placeholder="中国+86" v-model="tel">
      <p class="warn">登录遇到问题</p>
      <van-button round type="info" class="button" @click="get">获取短信验证码</van-button>
      <input type="text" placeholder="请输入接收到的验证码" v-model="yz">
      <van-button round type="info" class="button" @click="post">登录</van-button>
      <div class="zuce">未注册的手机号码验证后自动注册</div>
      <a href="http://github.com/login/oauth/authorize?client_id=b47f45b142830ad18936 &state=STATE&redirect_uri=http://localhost:9001/github/callback;" class="git">第三方账号登录</a>
      <van-grid clickable :column-num="2" class="grid">
          <van-grid-item icon="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4068955607,178387580&fm=26&gp=0.jpg" text="微信" to="/" icon-size="50px" />
          <van-grid-item icon="http://img1.imgtn.bdimg.com/it/u=377625384,343390195&fm=26&gp=0.jpg" text="QQ" url="/vant/mobile.html" icon-size="50px" />
      </van-grid>
      <div class="footer">
          <p>登录即代表同意<span class="text">《用户服务协议》</span>与<span class="text">《隐私政策》</span>等，<strong>接受免除或者限制责任，肃宗管辖约定</strong>等粗体或下划线标示条款。</p>
      </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Dialog } from 'vant'
// 全局注册
Vue.use(Dialog)
export default {
  data () {
    return {
      tel: '',
      yz: ''
    }
  },
  created () {
  },
  methods: {
    async get () {
      if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.tel))) {
        Dialog.alert({
          message: '手机号码输入错误，请重填！'
        })
      } else {
        const { data: res } = await this.$http.get('validateCode/send4Login?telephone=' + this.tel)
        console.log(res)
      }
    },
    async post () {
      const { data: res } = await this.$http.post('user/login', { 'telephone': this.tel, 'validateCode': this.yz })
      console.log(res)
      if (res.flag === true) {
        window.sessionStorage.setItem('token','ok')
        this.$router.push('/')
      }
    }
  }

}
</script>

<style scoped lang="less">
.icon {
    margin-top: 20px;
    margin-left: 15px;
}
h2 {
    margin-left: 15px;
}
input {
    border: none;
    border-bottom:1px solid #ccc;
    margin-left: 15px;
    margin-top: 40px;
    padding: 10px;
    width: 330px;
}
.warn {
    float:right;
    color: #C2C2C2;
    margin-right: 10px;
    font-size: 15px;
}
.button {
    margin-top:10px;
    background-color: #FFCE00;
    border: none;
    width: 350px;
    margin-left: 10px;
    font-size: 15px;
}
.zuce {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    color: #949494;
}
.sf {
    margin-top: 75px;
}
.git {
    display: inline-block;
    padding: 10px;
    width: 330px;
    background-color: skyblue;
    color: #fff;
    text-align: center;
    border-radius: 20px;
    margin-top:10px;
    margin-left: 10px;
    font-size: 15px;
}
.grid {
    margin-top: 50px;
}
.footer {
    text-align: center;
    font-size: 13px;
    color: #999999;
}
.footer .text {
    color: #E85700;
}
.footer strong {
    text-decoration: underline;
}
</style>
